<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JS拖拽div</title>
        <script src="../src/jquery-3.5.1.min.js"></script>
        <script src="../src/cUtils/cs/CUtil.js"></script>
        <style>
            #back {
                width: 100%;
                height: 1200px;
                text-align: center;
                background-color: #3b3f40;
                /*border-radius: 15px;*/
                /*border: 2px solid #0f1110;*/
                position: absolute;
            }
        </style>
    </head>
    <body>
        <back id="back">dfsd0</back>
    
    
    </body>
</html>

<script>
    let root = document.getElementById('back');
    let cardArr = [];
    let arrowArr = [];
    //-------创建卡片-----------------------
    for (let i = 0; i < 8; i++) {
        let card = S_creatdiv(root);
        card.innerHTML = "card_" + i;
        card.style.left = card.offsetWidth * (i * 1.6) + "px";
        card.style.top = 100 + "px";
        
        //div0.style.transform = 'rotate(7deg)';
        //div0.style.transformOrigin = "left center";
        CardDrag_SetDrag(card);
        cardArr[i] = card;
    }
    //-------创建箭头-----------------------
    for (let i = 0; i < cardArr.length - 1; i++) {
        let arrow = S_creatArroW(root);
        arrowArr[i] = arrow;
        let ii = i;
        cardArr[i].d_dragEvent = function (type) {
            let card0 = cardArr[ii];
            let cardB = cardArr[ii + 1]; 
            arrow.data.S_ArrowDarg(card0, cardB);
            let iiA = ii - 1;
            if (iiA >= 0) {
                let arrowA = arrowArr[iiA];
                let cardA = cardArr[iiA]; 
                arrowA.data.S_ArrowDarg(cardA, card0);
            }
        };
        cardArr[i].d_dragEvent(0);
    }
    
    
    function S_creatArroW(parent) {
        let arrow = document.createElement('arrow');
        //div.innerText = "arrow";
        arrow.style.position = "absolute";//绝对位置-非常重要的属性
        arrow.style.top = "10px";
        arrow.style.left = "20px";
        arrow.style.width = "100px";
        arrow.style.height = "4px";
        arrow.style.zIndex = 0;
        arrow.style.backgroundColor = "#330088";//div色块颜色
        arrow.style.transformOrigin = "left center";
        // div.style.borderRadius = "15px";//圆角半价
        // div.style.border = "2px solid #0f1155";//圆角描边颜色
        parent.appendChild(arrow);
        arrow.data = {
            _this: arrow,
            S_SetPosi: function (startPosi, endPosi) {
                arrow.style.left = startPosi.x + "px";
                arrow.style.top = startPosi.y + "px";
                let distance = Vector2.Distance(startPosi, endPosi);
                arrow.style.width = distance + "px";
                
                let angle = Vector2.Angle(startPosi, endPosi);
                //console.log("swqw............" + startPosi + "____" + endPosi + "___...._" + angle)
                arrow.style.transform = "rotate(" + angle + "deg)";
            },
            S_ArrowDarg: function (card0, cardB) {
                let startPosiB = new Vector2(card0.offsetLeft + card0.offsetWidth, card0.offsetTop + card0.offsetHeight / 2);
                let endPosiB = new Vector2(cardB.offsetLeft, cardB.offsetTop + cardB.offsetHeight / 2);
                arrow.data.S_SetPosi(startPosiB, endPosiB);
            }
        }
        return arrow;
    }

    
    console.log("打印类型....."+(typeof root))
    console.log("打印类型....."+(typeof arrowArr))

</script>